<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        isInline
        ref="formData"
        formItemWidth="120px"
        actionPosition="start"
        :isScalingBtn="false"
        :colNumOfRow="3.5"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        showActionCol
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="480"
        :actionColWidth="120"
        :actionRender="renderTableBtnAction"
        :selectionChange="handleTableSelection"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <el-row type="flex" slot="content_context">
          <el-button
            type="primary"
            size="mini"
            :disabled="isEmptyForSelection()"
            @click="handleBatchDelete"
          >批量删除</el-button>
          <el-button
            type="primary"
            size="mini"
            :disabled="isEmptyForSelection()"
            @click="handleBatchResubmit"
          >批量重新提交</el-button>
        </el-row>
      </basic-table>
    </el-card>
  </div>
</template>
<script>
import { getBtnsId } from '@/libs/btnsPermission';
import { mapGetters } from 'vuex';
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import { requestToData, requestToStatus } from '@/api/commonHttp';
import { getListByReturnMapKey } from '@/utils/getUtils';
export default {
  components: {
    BasicForm,
    BasicTable,
  },
  data () {
    return {
      formItemList: [
        { prop: 'keyword', label: '关键词名称：', type: 'input' }
      ],
      formData: {
        aliasName: '', // 别名名称
        keyword: '', // 关键词名称
      },
      tableInfo: {
        list: [],
        columns: [
          { title: '商品名称关键词', key: 'keyword' },
          { title: '提交人名称', key: 'submitUserName' },
          { title: '提交部门', key: 'submitOrgName' },
          { title: '提交时间', key: 'submitTime' },
        ],
        loading: false,
        selection: []
      },
      pagination: {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10
      },
      pageSizes: [10, 20, 30, 40],
    }
  },
  mounted () {
    this.loadInitDataInMounted();
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn']),
  },
  methods: {
    // 表格勾选为空
    isEmptyForSelection () {
      return this.tableInfo.selection.length === 0;
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const permissionBtns = [
        { label: '查看', method: this.handleView },
        { label: '删除', method: this.handleDelete },
        { label: '重新提交', method: this.handleResubmit },
      ];
      return (<div class="table-action">{
        permissionBtns.map(item => {
          if (this.showBtn(item.label)) {
            return <el-button
              type="text"
              onClick={() => item.method(row)}
            >{item.label}
            </el-button>;
          }
        })
      }</div>);
    },
    // 在mounted时期加载初始数据
    loadInitDataInMounted () {
      this.handleQueryForm();
    },
    // 获取表单内容
    getFormData (data) {
      this.formData = data;
    },
    // 获取表格数据 by 查询表单
    async getTableDataBySearchForm () {
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      const { nowPage, pageShow } = this.pagination;
      const retData = await requestToData({
        url: '/sysback/product/keyword/audit/listReject',
        type: 'post',
        data: { nowPage, pageShow, ...this.formData },
      }, () => { this.tableInfo.loading = true },
      () => { this.tableInfo.loading = false });
      if (retData) {
        this.tableInfo.list = retData?.results || [];
        this.pagination.totalNum = retData?.totalNum || 0;
      }
    },
    // 表单查询
    handleQueryForm () {
      this.pagination.nowPage = 1;
      this.getTableDataBySearchForm();
    },
    // 页码切换
    handlePageChange (val) {
      this.pagination.nowPage = val;
      this.getTableDataBySearchForm();
    },
    // 每页条数切换
    handlePageSizeChange (val) {
      this.pagination.pageShow = val;
      this.getTableDataBySearchForm();
    },
    // 表格勾选
    handleTableSelection (list) {
      this.tableInfo.selection = list;
    },
    // 批量删除
    handleBatchDelete () {
      this.$confirm(
        '确定要批量删除吗？',
        { title: '批量删除', type: 'warning' }
      ).then(() => {
        this.deleteRecord(
          getListByReturnMapKey(this.tableInfo.selection, 'auditKeywordUuid')
        ).then(retStatus => {
          if (retStatus) {
            this.$message.success('批量删除成功');
            this.getTableDataBySearchForm();
          }
        });
      }).catch(() => {});
    },
    // 批量重新提交
    handleBatchResubmit () {
      this.$confirm(
        '确定重新审核此数据吗？',
        { title: '重新提交审核', type: 'warning' }
      ).then(async () => {
        const retStatus = await requestToStatus({
          url: '/sysback/product/keyword/audit/batchReSubmit',
          type: 'post',
          data: getListByReturnMapKey(this.tableInfo.selection, 'auditKeywordUuid')
        }, () => { this.tableInfo.loading = true },
        () => { this.tableInfo.loading = false });
        if (retStatus) {
          this.$message.success('批量重新提交成功');
          this.getTableDataBySearchForm();
        }
      }).catch(() => {});
    },
    // 查看
    handleView (row) {
      const { href } = this.$router.resolve({
        name: 'aliasAuditNoPassView',
        query: { auditKeywordUuid: row.auditKeywordUuid, type: 'view' }
      });
      window.open(href, '_blank');
    },
    // 删除
    handleDelete (row) {
      this.$confirm(
        '确定要删除吗？',
        { title: '删除', type: 'warning' }
      ).then(() => {
        this.deleteRecord([row.auditKeywordUuid]).then(retStatus => {
          if (retStatus) {
            this.$message.success('删除成功');
            this.getTableDataBySearchForm();
          }
        });
      }).catch(() => {});
    },
    // 重新提交
    handleResubmit (row) {
      this.$router.push({
        name: 'aliasAuditNoPassEdit',
        query: { auditKeywordUuid: row.auditKeywordUuid, type: 'resubmit' }
      });
    },
    // 删除操作
    async deleteRecord (data) {
      const retStatus = await requestToStatus({
        url: '/sysback/product/keyword/audit/batchDeleteAudit',
        type: 'post',
        data
      }, () => { this.tableInfo.loading = true },
      () => { this.tableInfo.loading = false });
      return retStatus;
    }
  }
}
</script>
